<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>创建节点</title>
</head>

<body>
  <ul>
    <li>我是第一个元素</li>
  </ul>
  <script>
    const ul = document.querySelector('ul')
    // 创建节点createElement('标签名')
    const li1 = document.createElement('li')
    li1.innerHTML = '我是创建的节点'
    // appendChild追加节点(永远是放在最后面)
    ul.appendChild(li1)

    const li2 = document.createElement('li')
    li2.innerHTML = '我是创建的节点,要放在第一位'
    // insertBefore追加节点(追加的标签,在哪个元素前追加)
    ul.insertBefore(li2, ul.children[0])
  </script>
</body>

</html>